<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>结算界面</title>
</head>
<script src="js/jquery-1.12.0.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
            min-height: 483px;
            min-width: 890px;
            padding: 0px;
        }
        body {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }
        .outbox{
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background-image: url("imgs/gameover.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }
        .outbox::before{
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            width: 0px;
            content: '';
        }
    </style>
<body>

</body>
<script>
    function BalanceSence(){
        var self = this;
        //外面盒子相当于body
        self.$outbox = $("<div class='outbox'></div>");
        self.$outbox.css({"background-image":"url(imgs/gameover.png)"});
        //对话框外面的一层
        var $rider1 = $("<div></div>");
        $rider1.css({
            width:"153px",
            height:"205px",
            position:"absolute",
            top:"34%",
            left:"15%",
            "background-image": "url(imgs/player4.png)"
        });
        $rider1.appendTo(self.$outbox);
        var $rider2 = $rider1.clone();
        $rider2.css({
            width:"138px",
            height:"209px",
            top:"28%",
            left:"30%",
            "background-image": "url(imgs/player1.png)"
        });
        $rider2.appendTo(self.$outbox);
        var $rider3 = $rider1.clone();
        $rider3.css({
            width:"111px",
            height:"197px",
            top:"41%",
            left:"48%",
            "background-image": "url(imgs/player3.png)"
        });
        $rider3.appendTo(self.$outbox);
        var $rider4 = $rider1.clone();
        $rider4.css({
            width:"112px",
            height:"165px",
            top:"55%",
            left:"70%",
            "background-image": "url(imgs/player2.png)"
        });
        $rider4.appendTo(self.$outbox);
        var $cup1 = $("<div></div>");
        $cup1.css({
            width:"60px",
            height:"82px",
            position:"absolute",
            top:"53%",
            left:"23%",
            "background-image": "url(imgs/cup2.png)"
        });
        $cup1.appendTo(self.$outbox);
        var $cup2 = $cup1.clone();
        $cup2.css({
            top:"47.5%",
            left:"39%",
            "background-image": "url(imgs/cup1.png)"
        });
        $cup2.appendTo(self.$outbox);
        var $cup3 = $cup1.clone();
        $cup3.css({
            top:"59%",
            left:"55%",
            "background-image": "url(imgs/cup3.png)"
        });
        $cup3.appendTo(self.$outbox);
        var $restart = $("<div></div>");
        $restart.css({
            width:"263px",
            height:"69px",
            position:"absolute",
            bottom:"3%",
            left:"18%",
            "background-image": "url(imgs/restart.png)",
            cursor:"pointer"
        });
        $restart.appendTo(self.$outbox);
        var $returnmenu = $restart.clone();
        $returnmenu.css({
            "background-image": "url(imgs/returnmenu.png)",left:"41%"
        });
        $returnmenu.appendTo(self.$outbox);
        var $nextlevel = $restart.clone();
        $nextlevel.css({
            "background-image": "url(imgs/nextlevel.png)",left:"65%"
        });
        $nextlevel.appendTo(self.$outbox);
    }
    $(function(){
        var balance = new BalanceSence($("body"));
    })
</script>
</html>